<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽，拖放api</title>
<style type="text/css">
*{padding:0;margin:0;border:0;font-size:16px;font-family:'微软雅黑';color:#333;line-height:1.5;}
.wrap{width:80%;margin:0 auto;}
.part_1,.part_2,.part_3{padding:20px 15px;background:#f5f5f5;}
.fz16{font-size:16px;}
.fz20{font-size:20px;}
.cor_1{color:red;}
.drag_area_01{height:400px;position:relative;margin-top:25px;background:#fff;}
.drag_area_02{overflow:hidden;position:relative;margin-top:25px;background:#fff;}
.img01 {position:absolute;width:100px;height:50px;left:0;top:0;}
.img02{position:relative;width:100px;height:50px;float:left;margin-right:10px;}
.remove_area{height:100px;line-height:100px;text-align:center;background:#fff;margin-top:100px;font-size:16px;color:#333}
.reduce_img{height:400px;line-height:400px;text-align:center;background:#fff;margin-top:100px;font-size:16px;color:#999}
.show_img img{display:inline-block;width:80%;}
</style>
</head>
<body>
<div class="wrap" style='padding-bottom:40px;'>

  <div class="part_1">
    <p style="font-size:18px;margin-bottom:15px;">h5的新特性 拖放 API</p>
    <p>拖拽 : drag <br />拖放 : drop</p>
    <p>拖拽指的是鼠标点击源对象后，一直移动对象不松手，一旦松手及释放了。（将源对象移动到目标对象）</p><br />
    
    <ul style="list-style-position:inside">
      <li style="font-size:16px">源对象：指我们鼠标点击的一个实物，（一张图片，一个对象）</li>
      <li style="font-size:16px">目标对象：指我们拖动源对象后移动到一块区域</li>
      <li class="cor_1">源对象可以进入这个区域（开始进入）</li>
      <li class="cor_1">源对象可以在这个区上方悬停（没有松手）</li>
      <li class="cor_1">源对象可松开手将源对象放置此处</li>
      <li class="cor_1">源对象可以悬停后离开此区域</li>
    </ul><br />
    <p style="font-size:20px">源对象可以触发的时间</p>
    <p class='fz16'>1. <span class="cor_1">ondragstart</span>:源对象开始被拖动</p>
    <p class='fz16'>2. <span class="cor_1">ondrag</span>:源对象被拖动中（鼠标可能在移动也可能没有移动）</p>
    <p class='fz16'>3. <span class="cor_1">ondragend</span>:源对象被拖动结束</p>
    <br />
    <p style='font-size:20px;'>源对象被拖动 至 目标对象对象过程的事件</p>
    <p class="fz16">1.<span class="cor_1">ondragenter</span>:源对象开始被拖动进入目标对象</p>
    <p class="fz16">2.<span class="cor_1">ondragover</span>:源对象被拖动在目标对象上悬停</p>
    <p class="fz16">3.<span class="cor_1">ondragleave</span>:源对象被拖动离开目标对象</p>
    <p class="fz16">4.<span class="cor_1">ondrop</span>:源对象在目标对象上释放</p>
    <p style='font-size:20px;margin-top:20px;'>拖拽API共有七个</p>
  </div>

  <div class="part_2" style="margin-top:30px;">
    <p style='font-size:18px;margin-bottom:15px;'>在源对象事件与目标对象事件之间传递数据</p>
    <p class=""><span class="cor_1">e.dataTransfer{}</span>数据传递的对象；用于在源对象和目标对象的事件建传递数据</p>
    <p class=""><span class="cor_1">e.dataTransfer.setDate(k,v)</span>:源对象上的事件处理中保存数据；k-v必须都是string类型</p>
    <p class=""><span class="cor_1">e.dataTransfer.getData(k)</span>:目标对象上的事件处理中对去数据</p>
  </div>

  <div class="part_3" style='margin-top:30px;'>
    <p class="fz20">拖拽移动飞机</p>
    <div id="drag_area_01" class="drag_area_01">
      <img id='img01' src="20161118132617227.png" alt="" class="img01" />
    </div>
  </div>

  <div class="part_3" style='margin-top:30px;'>
    <p class="fz20">拖拽删除飞机</p>
    <div id="drag_area_02" class="drag_area_02">
      <img id='img02' src="20161118132617227.png" alt="" class="img02" />
      <img id='img03' src="20161118132617227.png" alt="" class="img02" />
      <img id='img04' src="20161118132617227.png" alt="" class="img02" />
    </div>
    <div id='remove_area' class="remove_area"> 拖动至此删除 </div>
  </div>

  <div class="part_3" style='margin-top:30px;'>
    <p class="fz20">拖拽在浏览器上显示</p>
    <p id='show_img' class='show_img' style="text-align:center;margin-top:75px"></p>
    <div id='reduce_img' class="reduce_img"> 在电脑上拖动图片到此处(500kb以内) </div>
  </div>

</div>
<script type="text/javascript">

//拖拽飞机移动位置
  (function(){
    var sourceObj = document.getElementById('img01');
    var osx = 0,  
        osy = 0;  //鼠标刚开始点击拖拽的位置
    var dragBox = document.getElementById('drag_area_01');


    //刚开始拖动
    sourceObj.ondragstart = function(e){
      console.log('开始拖动');
      osx = e.offsetX;
      osy = e.offsetY;
      console.log(osx+"@@"+osy);
    }

    //拖动中
    sourceObj.ondrag = function(e){
      console.log('正在拖动中');
      var x = e.pageX,    //鼠标位置的x轴
          y = e.pageY;    //鼠标位置的y轴
      if(x == 0 && y == 0){return false}

      x -= osx; y -= osy;
      console.log();
      sourceObj.style.left = x + 'px';
      sourceObj.style.top = y + 'px';
    }

    //拖动结束
    sourceObj.ondragend = function(e){
      var mouseY = e.pageY,
          mouseX = e.pageX,
          sourceObjX = dragBox.offsetLeft,
          sourceObjY = dragBox.offsetTop;
      
      var endY = mouseY - sourceObjY,
          endX = mouseX - sourceObjX;

      console.log('拖动结束');
      sourceObj.style.left = endX + 'px';
      sourceObj.style.top = endY + 'px';

    }
  })();



//拖动删除
  (function(){
    var removeList = document.querySelectorAll('.img02');
    var removeArea = document.getElementById('remove_area');

    var osx = 0,  
        osy = 0;  //鼠标刚开始点击拖拽的位置
    var ensureEnter = false;

    for(var i = 0,len = removeList.length; i < len; i++){
      
      //开始拖动
      removeList[i].ondragstart = function(e){  //源对象开始拖动
        e.dataTransfer.setData('thisId',this.id)
        console.log(this.id);
      }

      //拖动中
      removeList[i].ondrag = function(e){   //源对象拖动中
        var x = e.pageX,    //鼠标位置的x轴
            y = e.pageY;    //鼠标位置的y轴
        if(x == 0 && y == 0){return false}

        x -= osx; y -= osy;
        console.log();
        this.style.left = x + 'px';
        this.style.top = y + 'px';
      }

      //拖动结束
      removeList[i].ondragend = function(e){  //源对象拖动结束
        if( !ensureEnter ){
          this.style.left = '';
          this.style.top = '';
        }
      }

    }
       
    removeArea.ondragover = function(e){   //ondragover 源对象 悬停在目标对象之上
      e.preventDefault();
      ensureEnter = true;
    }

    removeArea.ondragleave = function(e){  //ondragleave 源对象离开目标对象
      e.preventDefault();
      ensureEnter = false;
    }

    removeArea.ondrop = function(e){    // ondrop 源对象 在目标对象上被释放
      var id = e.dataTransfer.getData('thisId');   // e代表拖动事件 e.dataTransfer.getDate() 有点像 window.sessionStorage.getItem()
      var removeThis = document.getElementById(id);
      removeThis.parentNode.removeChild(removeThis);
    }
    
  })();


//从电脑拖拽一张图片到浏览器中显示
  (function(){
    var reduceArea = document.getElementById('reduce_img');
    document.ondragover = function(e){ 
      e.preventDefault();
    }

    document.ondrop = function(e){
      e.preventDefault();
    }

    reduceArea.ondragover = function(e){
      e.preventDefault();
    }

    reduceArea.ondrop = function(e){
      //console.log(e.dataTransfer.files.length)
      var picture = e.dataTransfer.files[0];
      //console.log(files);
      var readPic = new FileReader();
      //readPicture.readAsText(picture);
      readPic.readAsDataURL( picture );
      readPic.onload = function(){
        //console.log(readPic.result);
        var img = new Image();
        img.src = readPic.result;  // 图片数据
        document.getElementById('show_img').appendChild(img);
      }
    }


  })();

</script>
</body>
</html>
